<template>
	<div>
		<!-- 头部 -->
		<div style="margin-bottom: 15px">
			<el-carousel :interval="5000" arrow="always">
				<el-carousel-item>
					<div class="img-banner"></div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<section>
			<el-row :gutter="12">
				<el-col :span="16">
					<el-card>
						<template #header>
							<span class="title-item">资源概览</span>
						</template>
						<div style="height: 390px">
							<h3>标准文件资源</h3>
							<div class="card_item">
								<div class="card_item_con">
									<div class="div_item">
										<div class="file-name">国标</div>
										<div class="file-num">{{ standardData.nationalStandard | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">行标</div>
										<div class="file-num">{{ standardData.industryStandard | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">地标</div>
										<div class="file-num">{{ standardData.localStandard | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">团标</div>
										<div class="file-num">{{ standardData.teamStandard | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">规范性文件</div>
										<div class="file-num">{{ standardData.normativeDocuments | 0 }}</div>
									</div>
								</div>
							</div>
							<h3>元数据资源</h3>
							<div class="card_item">
								<div class="card_item_con">
									<div class="div_item">
										<div class="file-name">数据元</div>
										<div class="file-num">{{ standardData.dataMeta | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">值域</div>
										<div class="file-num">{{ standardData.range | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">数据集</div>
										<div class="file-num">{{ standardData.dataSet | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">统计指标</div>
										<div class="file-num">{{ standardData.statisticalIndicators | 0 }}</div>
									</div>
									<div class="div_item">
										<div class="file-name">指标集</div>
										<div class="file-num">{{ standardData.indicatorSet | 0 }}</div>
									</div>
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card>
						<template #header>
							<span class="title-item">资源新增</span>
						</template>
						<div style="overflow: auto; height: 390px">
							<div class="list-item" v-for="(item, index) in fileList" :key="index">
								<div class="img-icon">
									<img src="@/assets/standard-info/image4.png" alt="" />
								</div>
								<div class="text">
									<div class="text-cont">{{ item.name }}</div>
									<p style="color: #a8abb2; font-size: 12px; margin-top: 8px">
										文件类型：{{ matchType(item.standardGroup) }} | 上传时间：{{ formatTime(item.createTime) }}
									</p>
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</section>
	</div>
</template>
<script setup lang="ts">
import timeFormater from 'time-formater'
import { ref, onMounted } from 'vue'
import { getStandardData, getAddFilesData } from '@/api/standard-services/index'

const standardData = ref({
	nationalStandard: '',
	industryStandard: '',
	localStandard: '',
	teamStandard: '',
	normativeDocuments: '',
	dataMeta: '',
	range: '',
	dataSet: '',
	statisticalIndicators: '',
	indicatorSet: ''
})

const fileList = ref([])

const formatTime = (time: any) => {
	return timeFormater(time).format('YYYY年MM月DD日')
}

onMounted(() => {
	getData()
})

const getData = () => {
	getStandardData().then((res: any) => {
		standardData.value = res.data
	})

	getAddFilesData().then((res: any) => {
		fileList.value = res.data
	})
}

const matchType = id => {
	let name = ''
	switch (id) {
		case 1:
			name = '国标'
			break
		case 2:
			name = '行标'
			break
		case 3:
			name = '地标'
			break
		case 4:
			name = '团标'
			break
		case 5:
			name = '规范性文件'
			break
	}
	return name
}
</script>
<style lang="scss" scoped>
.img-banner {
	height: 300px;
	background: url('@/assets/standard-info/1920.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 15%;
}
.title-item {
	box-shadow: -4px 0 0 -1px #5774f4;
	padding-left: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #1d2129;
	font-family: PingFang SC, PingFang SC;
}
.card_item {
	padding: 20px;
	.card_item_con {
		display: flex;
		background: #fafcff;
		height: 85px;
		.div_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.file-name {
				text-align: center;
				color: #909399;
				font-size: 12px;
				font-family: PingFang SC, PingFang SC;
			}
			.file-num {
				text-align: center;
				font-size: 20px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #5774f4;
				line-height: 23px;
				margin-top: 10px;
			}
		}
	}
}

.img-icon {
	margin-right: 10px;
}

h3 {
	font-size: 14px;
	font-family: PingFang SC, PingFang SC;
	color: #1d2129;
}

.list-item {
	display: flex;
	background: #fafcff;
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	border: 1px solid #ecf3fe;
	height: 89px;
	align-items: center;
	padding: 5px;
	margin: 0 0 10px 0;
	.text {
		flex: 1;
		.text-cont {
			height: 40px;
			line-height: 20px;
			position: relative;
			overflow: hidden;
		}
		.text-cont::after {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 0 20px 0 10px;
		}
	}
}
::-webkit-scrollbar {
	display: none; //Chorme
}
</style>